/**
 * Created by wxl on 2016/11/15.
 */
import React,{Component} from 'react';
import classNames from 'classnames/bind';
import styles from 'css/components/app';
const cx = classNames.bind(styles);
import $ from 'jquery';
import WrapListComponent from './../components/WrapListComponent.jsx';
import PListComponent from './../components/PListComponent.jsx';
var tool=require("./../api/tool.js");

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../actions';
import {fromJS} from 'immutable';

const mapStateToProps = state =>{
    return {
        article: state.article.toJS(),
    }
}

const mapDispatchToProps = dispatch =>{
    return {
        actions: bindActionCreators(Actions, dispatch)
    }
}

@connect(mapStateToProps,mapDispatchToProps)
export default class Detail extends Component{
    constructor(props,context){
        super(props,context);
        this.handleChange = this.handleChange.bind(this)
        this.state={"list_header_ad":"","card":{},"plistData":[],"hotData":[], backArr:[],"detail":{}}

    }
    static fetchData(params){
        return [Actions.getDetail(params.id),Actions.getDetailHotData(params.id),Actions.getDetailPListData(params.id)]
    }

    handleChange(e,option){
        e.preventDefault()
        //const { actions } = this.props
        //actions.getIndexData()
    }
    goBack(){
        history.go(-1);
    }
    componentDidMount(){
        var parent=this;
        this.setState({"detail":this.props.article.data});
        $(".header").css({"height":"3rem"});
        var hotData=[];
        if(this.props.article.hotData){
            this.props.article.hotData.forEach(function(e){
                hotData.push({title:e.title,id:e.id,url:"/detail/"+e.id})
            });
        }
        parent.setState({"hotData":hotData});

        var  pListData=[];

        if( this.props.article.pListData)
            this.props.article.pListData.forEach(function(e,index){
                pListData.push({
                    title:e.title,
                    images:e.pic,
                    url:"/detail/"+e.id,
                    commentCount:e.comment?e.comment:0
                })
            });
        parent.setState({"plistData":pListData})


    }
    componentWillMount(){
        this.setState(
            {
                //"list_header_ad":"//wa.gtimg.com/website/201611/unknown_D_20161101135718.jpg",
                //"list_right_ad":"http://img1.gtimg.com/ninja/2/2016/11/ninja147925726284341.jpg"
                "list_header_ad":"",
                "list_right_ad":""
            })
    }

    goTop(){
        var time = setInterval(function () {
            document.body.scrollTop = document.body.scrollTop - 50;
            if (document.body.scrollTop === 0) {
                clearInterval(time);
            }
        }, 1);
    }
    render(){
        var that=this;

        function createMarkup() { return {__html: that.state.detail.content}; };
        return (
            <div className={cx("main-body")}>
                <div  className={cx("detail-bar")}>
                    <div onClick={()=>this.goBack()}>
                        <svg viewBox="0 0 24 24" className={cx("back-btn")}>
                            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
                        </svg>
                    </div>
                </div>
                <div  className={cx("list-left")}>
                    {
                        this.state.list_header_ad?[
                            <div className={cx("list-header-ad")}>
                                <img src={this.state.list_header_ad}/>
                            </div>
                        ]:null
                    }
                    <article  className={cx("detail-article")} >
                        <section  className={cx("detail-title")}>{that.state.detail.title}</section>
                        <section   className={cx("detail-subtitle")}>
                            {that.state.detail.description}
                        </section>
                        <p  className={cx("detail-content")}>
                            <div dangerouslySetInnerHTML={createMarkup()}/>
                        </p>
                    </article>


                        {
                            this.state.plistData.length>0?[
                                <div  className={cx("major")} style={{marginTop:"10px"}}>
                                    <div  className={cx("hot-title")}>推荐</div>
                                    {
                                        this.state.plistData.map(function(item,index){
                                            return (
                                                <PListComponent  data={item} key={'plist_'+index} />
                                            )
                                        })
                                    }
                                </div>
                            ]:null
                        }

                </div>
                <div className={cx("list-right")}>
                    <div className={cx("hot-list")}>
                        <div className={cx("hot-title")}>热门排行榜</div>
                        <ul>
                            {
                                this.state.hotData.map(function(item,index){
                                    return (
                                        <li key={'hot_list'+index}>
                                            <a href={item.url}>
                                            <p className={cx(index<3?'hot-list-title hot-list-title-active':'hot-list-title')} name={index+1} >{item.title}</p>
                                            </a>
                                        </li>
                                    )
                                })
                            }

                        </ul>
                    </div>
                    {
                        this.state.list_right_ad?[
                        <div className={cx("list-right-ad")}>
                            <img src={this.state.list_right_ad} width="300"/>
                        </div>
                    ]:null }

                    {
                        this.state.list_right_ad?[
                        <div className={cx("list-right-ad")}>
                            <img src="http://usr.im/300x300?&bg=2CC8DC"/>
                        </div>
                    ]:null
                    }

                    {
                        this.state.list_right_ad?[
                        <div className={cx("list-right-ad")}>
                            <img src="http://usr.im/300x300?&bg=FF0099"/>
                        </div>
                        ]:null
                    }
                </div>
                    {
                        this.state.detail_bottom_ad?[
                            <div className={cx("detail-bottom-ad")} style={{width:"1000px",height:"100p",display:"table"}}>
                                <img src="http://usr.im/1200x100?&bg=2CC8DC"/>
                            </div>
                        ]:null
                    }

                <div className={cx("aScroll")} onClick={()=>this.goTop()}></div>
            </div>

        )
    }
}

